import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {
  search = () => {
    // 获取用户输入(连续解构赋值+重命名)
    const {keyWordElement: {value: keyWord}} = this
    // console.log(keyWord)
    // 发送请求前通知App更新状态
    this.props.updateAppState({
      isFirst: false,
      isLoading: true
    })
    // 发送网络请求
    axios.get(`/api1/search/users?q=${keyWord}`).then(
      response => {
        // console.log('成功')
        // 请求成功，通知App更新状态
        this.props.updateAppState({isLoading: false, users: response.data.items})
        // this.props.saveUsers(response.data.items)
      },
      error => {
        // console.log('失败', error)
        // 请求失败，通知App更新状态
        this.props.updateAppState({isLoading: false, err: error.message})
      }
    )
  }
  render() {
    return (
      <section className="jumbotron">
      <h3 className="jumbotron-heading">搜索Github用户</h3>
      <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="请输入你要搜索的用户名" />&nbsp;
          <button onClick={this.search}>搜索</button>
      </div>
      </section>
    )
  }
}
